<template>
    <!-- <div> -->
    <div class="flex h-full w-full px-1">
        <WebExplorer
            @ready="handleRegistEvents"
            ref="webExplorerRef"
            :default-url="workSpaceStore.data?.views?.design?.defaultUrl"
            @url-change="handleUrlChange"
        />
    </div>

    <!-- </div> -->
</template>

<script setup lang="ts">
import WebExplorer from '@/components/WebExplorer/WebExplorer.vue'
import { useWorkSpaceStore } from '@/stores/workSpace'
import { ref } from 'vue'
import { lanhuResponseHandler } from './responseHandler'

// 浏览器实例
const webExplorerRef = ref<InstanceType<typeof WebExplorer> | null>(null)
// 数据仓库
const workSpaceStore = useWorkSpaceStore()
// 注册事件
const handleRegistEvents = () => {
    const webExplorer = webExplorerRef.value
    if (!webExplorer || !webExplorer.webviewContent.webviewWebContent) return
    const { webviewContent } = webExplorer
    // 处理蓝狐的响应
    webviewContent.on('response-received', lanhuResponseHandler)
}

const handleUrlChange = (url: string) => {
    workSpaceStore.update('views.design.defaultUrl', url)
}
</script>

<style scoped></style>
